<template>
  <div class="siteListPage">
    <div class="top-button add_btn_top">
      <div class="showTree">显示树</div>
      <el-switch class="switch" v-model="isCollapse"> </el-switch>
      <div
        :style="{
          color: switchText == '显示筛选' ? '#666666' : '#409EFF',
          fontSize: '14px',
          marginLeft: '10px',
        }"
      >
        {{ switchText }}
      </div>
      <el-switch
        style="margin-left: 10px"
        active-color="#2680D2"
        v-model="isShowScreen"
      >
      </el-switch>
    </div>
    <div class="res_con">
      <el-aside width="18%" class="treebox" v-if="isCollapse">
        <el-menu
          router
          style="width: 100%"
          unique-opened
          :default-active="$route.path"
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <el-input
            class="treeInput"
            placeholder="请输入"
            suffix-icon="el-icon-search"
            v-model="filterText"
            size="mini"
          >
          </el-input>
          <div class="all_open">
            <div class="open_box" @click="unFoldAll2(treedata)">
              <img class="icon" src="@/assets/treeicon1.png" />
              <span class="expandAll text_nowrap">全部展开</span>
            </div>
            <div class="verticalLine"></div>
            <div class="open_box" @click="collapseAll2(treedata)">
              <img class="icon" src="@/assets/treeicon2.png" />
              <span class="closeAll text_nowrap">全部收起</span>
            </div>
          </div>
          <el-tree
            v-init-screen-h="10"
            class="filter-tree"
            :data="treedata"
            :props="defaultProps"
            default-expand-all
            accordion
            :filter-node-method="filterNode"
            highlight-current
            ref="tree"
            node-key="id"
            @node-click="treeListClick"
          >
            <span class="custom-tree-node" slot-scope="{ data }">
              <span v-if="data.type == '1'" class="type_display">
                <svg-icon icon-class="level1" class="treeSvg" />
                <span>
                  {{ data.name }}
                </span>
              </span>
              <span v-if="data.type == '2'" class="type_display">
                <svg-icon icon-class="level2" class="treeSvg" />
                {{ data.name }}
              </span>
              <span v-if="data.type == '3'" class="type_display">
                <svg-icon icon-class="level3" class="treeSvg" />
                {{ data.name }}
              </span>
              <span v-if="data.type == '4'" class="type_display">
                <svg-icon icon-class="level4" class="treeSvg" />
                {{ data.name }}
              </span>
              <span v-if="data.type == '5'" class="type_display">
                <div
                  class="treeSvg5"
                  :style="{
                    background: data.color != null ? data.color : '',
                  }"
                ></div>

                {{ data.name }}
              </span>
            </span>
          </el-tree>
        </el-menu>
      </el-aside>
      <div v-init-screen-h="10">
        <RightTab style="background: #fff"></RightTab>
      </div>
      <div v-if="isShowScreen" class="searchForm">
        <div style="width: 100%" v-init-screen-h>
          <div class="select">筛选</div>
          <div class="">
            <div class="searchText">使用单位:</div>
            <el-input
              class="inputStyle"
              v-model="searchFrom.name"
              clearable
              size="mini"
              placeholder="请输入名称"
            >
            </el-input>
          </div>
          <div class="">
            <div class="searchText">炉子编号:</div>
            <el-input
              class="inputStyle"
              v-model="searchFrom.name1"
              clearable
              size="mini"
              placeholder="请输入"
            >
            </el-input>
          </div>
          <div class="">
            <div class="searchText">检定/校准者:</div>
            <el-input
              class="inputStyle"
              v-model="searchFrom.name2"
              clearable
              size="mini"
              placeholder="请输入"
            >
            </el-input>
          </div>
          <div class="">
            <div class="searchText">检定日期:</div>
            <div class="dis_center">
              <el-date-picker
                size="small"
                v-model="searchFrom.time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
              <span style="margin: 0 6px">-</span>
              <el-date-picker
                size="small"
                v-model="searchFrom.time2"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="bottomBtn">
          <el-button class="reset" size="mini" style="width: 50%" @click="reSet"
            >重置</el-button
          >
          <el-button
            @click="reSet"
            class="submit"
            size="mini"
            style="width: 50%"
            type="primary"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ResizeBox from "@/components/ResizeBox";
import { getDeviceTree } from "@/api/device";
import RightTab from "./components/RightTab.vue";
import "@/assets/style/deviceCss/filterWindow.css";
export default {
  components: {
    ResizeBox,
    RightTab,
  },
  data() {
    return {
      searchFrom: {},
      switchText: "显示筛选",
      isShowScreen: false,
      isCollapse: false,
      addToSite: false,
      filterText: "",
      treedata: [
        {
          name: "2333",
          id: 0,
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      statusBgc: "red",
    };
  },
  mounted() {
    this.getTree();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    reSet() {
      this.isShowScreen = false;
    },
    setAllExpand(arr, isExpand) {
      let self = this;
      arr.forEach((el) => {
        self.$refs.tree.store.nodesMap[el.id].expanded = isExpand;
        if (el.children) {
          self.setAllExpand(el.children, isExpand);
        }
      });
    },
    // 树全部展开
    unFoldAll2(data) {
      this.setAllExpand(data, true);
    },
    // 全部折叠
    collapseAll2(data) {
      this.setAllExpand(data, false);
    },
    // 菜单折叠与展开
    togleCollapse() {
      this.isCollapse = !this.isCollapse;
    },

    // 树列表点击事件
    treeListClick(data) {
      if (data.type == 2) {
        this.$router.push({
          path: "/thesite",
          query: { areaToken: data.token },
        });
      } else if (data.type == 3) {
        this.$router.push({
          path: "/sitename",
          query: { areaToken: data.token },
        });
      }
    },

    // 树结构方法
    // :render-content="renderContent"
    // renderContent(h, { node, data, store }) {
    // },

    // 树列表查询事件
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    // 获取树状列表
    getTree() {
      let that = this;
      var params = {
        // tenantToken: getCookie("tenant").token,
      };
      getDeviceTree(params).then((res) => {
        if (res.data.code == 200) {
          // var treelist = JSON.parse(
          //   JSON.stringify(res.data.data).replace(/name/g, "label")
          // );
          that.treedata = res.data.data;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.dis_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content_site_list {
  background: #fff;
  padding: 20px;
  padding-bottom: 0;
  width: 100%;
}
.res_con {
  display: flex;
}
.all_open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  margin: 16px 0;
  font-size: 12px;
  color: #666;
}
.open_box {
  align-items: center;
  display: flex;
}
.open_box .icon {
  margin-right: 6px;
}
.type_display {
  display: flex;
  align-items: center;
}
.treeSvg {
  font-size: 10px;
  margin-right: 3px;
  /* margin-bottom: 1px; */
}
.type_5 {
  display: flex;
}
.treeSvg5 {
  width: 8px;
  height: 8px;
  margin-right: 3px;
}

.showTree {
  color: #666;
  /* margin: 5px 10px 0 0; */
  float: left;
  font-size: 12px;
  /* margin-top: 7px; */
}

.switch {
  /* margin: 5px 15px 0 0; */
  /* float: left; */
  margin-left: 15px;
}

.line {
  display: inline-block;
  height: 12px;
  width: 1px;
  vertical-align: middle;
  background-color: #999999;
  /* float: left; */
  /* margin: 8px 15px 0 0; */
  margin: 0 15px;
}

.verticalLine {
  height: 12px;
  width: 1px;
  vertical-align: middle;
  background-color: #e9e9e9;
}

.treeInput {
  margin-top: 15px;
  padding: 0 10px;
}

/* el-tree样式 */
.el-tree {
  color: rgb(0, 0, 0);
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}

/* 树节点鼠标悬浮式改变背景色，字体颜色 */
/deep/ .el-tree-node__content:hover {
  background-color: #1890ff;
  color: #fff;
}

/* 改变节点高度 */
/deep/ .el-tree-node__content {
  height: 36px;
}

/* 节点前边的三角图标并不会被节点样式影响，需要单独修改 当前激活的颜色*/
/deep/ .el-tree-node:focus > .el-tree-node__content .el-tree-node__expand-icon {
  color: rgb(0, 192, 250);
}

/* el-tree滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgb(220, 220, 220);
  --webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(220, 220, 220, 0.4);
}
.treebox {
  margin-right: 6px;
  overflow-y: auto;
  /* height: calc(100vh - 150px) !important; */
  height: 100%;
  background-color: #fff;
}

/deep/ .el-tree-node__content:hover {
  color: #000;
}
</style>
